<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

        function Login(props) {
            const { login } = props
            return (
                <div>
                    <h1>请先登录</h1>
                    <button onClick={login}>登录</button>
                </div>
            )
        }
        
        function Welcome(props) {
            const { logout } = props
            return (
                <div>
                    <h1>欢迎，您已登录</h1>
                    <button onClick={logout}>退出</button>
                </div>
            )
        }


        class App extends React.Component {
            //状态
            state = { isLogin: false }  //false 未登录


            handleLogin = async () => {
                this.setState({ isLogin: true })
            }

            handleLogout = async () => {
                this.setState({ isLogin: false })
            }


            render() {
                console.log('render');

                if (this.state.isLogin) {
                    return (
                        <div>
                            <h1>欢迎，您已登录</h1>
                            <button onClick={this.handleLogout}>退出</button>
                        </div>
                    )
                } else {
                    return (
                        <div>
                            <h1>请先登录</h1>
                            <button onClick={this.handleLogin}>登录</button>
                        </div>
                    )
                }

                // return (
                // <div>
                //     {
                //         this.state.isLogin ? <Welcome logout={this.handleLogout}/> : <Login login={this.handleLogin}/>
                //     }
                // </div>
                // )

            }
        }


        // 分析：状态 页面 事件

        // 定义状态

        // 定义页面

        // 状态和页面关系

        // 定义改变状态事件  （状态在哪 定义事件就在哪里）

        // button 和 事件关系  事件传递  =》类组件定义 
        //                             =》子组件 事件传递

    

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>